import { Outlet } from '@umijs/max';
import { App, ConfigProvider } from 'antd';
import zh_cn from 'antd/locale/zh_CN';

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import duration from 'dayjs/plugin/duration';
import isBetween from 'dayjs/plugin/isBetween';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import minMax from 'dayjs/plugin/minMax';
import quarter from 'dayjs/plugin/quarterOfYear';

dayjs.locale('zh-cn');
dayjs.extend(duration);
dayjs.extend(isBetween);
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(customParseFormat);
dayjs.extend(minMax);
dayjs.extend(quarter);

const Layout = ({ ...props }) => {
  return (
    <ConfigProvider
      autoInsertSpaceInButton={false}
      locale={zh_cn}
      theme={{
        token: {
          colorPrimary: '#008BD5',
          // controlHeightLG: 50,
          controlHeight: 38,
        },
        components: {
          Modal: { wireframe: true },
          Button: { paddingContentHorizontal: 24, colorLink: '#008BD5' },
          Input: {
            colorBgContainer: '#F6F9FF',
            colorBorder: '#E7EAF0',
          },
          InputNumber: {
            colorBgContainer: '#F6F9FF',
            colorBorder: '#E7EAF0',
          },
          Pagination: { wireframe: true },
          Table: {
            colorFillAlter: '#F4F9FF',
            // paddingContentVerticalLG: 16,
            // padding: 24,
            // borderRadiusLG: 0,
            colorBorderSecondary: '#E8F1FC',
          },
          DatePicker: {
            colorBgContainer: '#F6F9FF',
            colorBorder: '#E7EAF0',
          },

          Upload: {
            actionsColor: '#F6F9FF',
            controlHeightLG: 35,
            colorFillAlter: '#F6F9FF',
            paddingXS: 4,
            lineType: 'solid',
          },
          Select: {
            colorBgContainer: '#F6F9FF',
            colorBorder: '#E7EAF0',
          },
          TreeSelect: {
            colorBgContainer: '#F6F9FF',
            colorBorder: '#E7EAF0',
          },
          Transfer: {
            colorBgContainer: '#F6F9FF',
            colorBorder: '#E7EAF0',
          },
          Segmented: {
            colorBgLayout: '#F3F8FF',
            itemHoverColor: '#008BD5',
            // controlHeight: 42,
          },
        },
      }}
    >
      <App>
        <Outlet />
      </App>
    </ConfigProvider>
  );
};

export default Layout;
